<!-- 从业者-个人求职首页 -->
<template>
	<view class="recruitment-container">

		<!-- 图文导航 -->
		<view class="dial-nav">
			<dial-nav marginTopLine='22rpx' imgSize='84rpx' :mode="3" :list="dialNavList"></dial-nav>
		</view>

		<!-- 搜索栏 -->
<!-- 		<view class="search-container">
			<u-search placeholder="请输入搜索的关键字" v-model="keyword" bg-color="#fff" border-color="#fff"></u-search>
		</view> -->

		<!-- 专业等级筛选 -->
		<view class="filter-section">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="期望城市" :options="options1" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="求职岗位" :options="options2" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value3" title="岗位类型" :options="options3" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value4" title="薪资范围" :options="options4" @change="change"></u-dropdown-item>
			</u-dropdown>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 招聘列表 -->
			<view v-if="jobList.length > 0">
				<view v-for="(job, index) in filteredJobs" :key="index" class="job-card" @click="jobDetails(job.gwi_flowid)">
					<view class="job-header">
						<text class="job-title">{{ job.gwi_name }}</text>
						<text class="job-salary">{{ job.gwi_offer }}</text>
					</view>

					<view class="job-info">
						<text class="info-item">{{ job.gwi_exptype }}经验</text>
<!-- 						<text class="info-item">|</text> -->
						
					</view>

					<view class="job-meta">
						<text class="info-item">工作地：{{ job.gwi_workaddr }}</text>
						<!-- <text class="status" :class="'status-' + job.status">{{ job.statusText }}</text> -->
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>
		<!-- 引入客服悬浮按钮 -->
		<float-customer-service />

		<!-- 自定义tabtar -->
		<u-tabbar v-model="current" :show="show" :bg-color="bgColor" :border-top="borderTop" :list="list"
			:mid-button="midButton" :inactive-color="inactiveColor" :activeColor="activeColor"
			@change="tabbarchange"></u-tabbar>

	</view>
</template>

<script>
	import FloatCustomerService from '@/components/FloatCustomerService.vue'
	import DialNav from '@/components/nav/dial-nav.vue';
	import util from '@/utils/util.js'
	export default {
		components: {
			DialNav,
			FloatCustomerService
		},
		data() {
			return {
				currentTab: 1, // 默认选中"我的招聘"
				keyword: '',
				// 顶部导航
				dialNavList: [{
						img: require('static/nav/nav-classify.png'),
						name: '我的简历',
						url: `pages/Practitioner/personMesume/personMesume?usercode=${uni.getStorageSync('usercode')}`,
						params: {}
					},
					{
						img: require('static/nav/nav-recommond.png'),
						name: '已投简历',
						url: 'pages/Practitioner/applyJob/submitResume',
						params: {}
					},
					{
						img: require('static/nav/nav-points.png'),
						name: '我的面试',
						url: 'pages/Practitioner/applyJob/myInterview',
						params: {}
					},
				],
				// 条件过滤项
				currentTab: 0,
				value1: '',
				value2: '2',
				value3: '2',
				value4: '2',
				options1: [{
						label: '福州',
						value: 1,
					},
					{
						label: '厦门',
						value: 2,
					},
					{
						label: '上海',
						value: 3,
					}
				],
				options2: [{
						label: '康养师',
						value: 1,
					},
					{
						label: '技师',
						value: 2,
					},
					{
						label: '中级技师',
						value: 3,
					}
				],
				options3: [{
						label: '全职',
						value: 1,
					},
					{
						label: '兼职',
						value: 2,
					},
					{
						label: '外包',
						value: 3,
					}
				],
				options4: [{
						label: '5000-8000',
						value: 1,
					},
					{
						label: '8000-10000',
						value: 2,
					},
					{
						label: '1w以上',
						value: 3,
					}
				],
				// 岗位列表
				jobList: [{
						id: 1,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						status: 'draft',
						statusText: '未发布'
					},
					{
						id: 2,
						title: '康养师',
						salary: '6K~10K',
						location: '福州-鼓楼区',
						experience: '1-3年',
						createTime: '2025-05-23',
						status: 'published',
						statusText: '已发布'
					}
				],
				// 按钮组中的样式写法
				customStyleObject: {
					marginRight: '20rpx',
					// margin-right: 20rpx;

				},
				// 底部tabtar
				current: 2,
				show: true,
				bgColor: '#F1F7F7',
				borderTop: true,
				list: '',
				midButton: false,
				inactiveColor: '#516178',
				activeColor: '#03B8CD'
			}
		},
		onLoad() {
			this.list = [{
						iconPath: "/static/xuexi_1.png",
						selectedIconPath: "/static/xuexi_2.png",
						text: '在线学习',
						count: 0,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "/static/kaozheng_1.png",
						selectedIconPath: "/static/kaozheng_2.png",
						text: '考证培训',
						customIcon: false,
					},
					{
						iconPath: "/static/qiuzhi_1.png",
						selectedIconPath: "/static/qiuzhi_2.png",
						text: '个人求职',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "/static/jingsai_1.png",
						selectedIconPath: "/static/jingsai_2.png",
						text: '职业竞赛',
						customIcon: false,
					},
					{
						iconPath: "/static/wode_1.png",
						selectedIconPath: "/static/wode_2.png",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
					},
				]
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				if (this.currentTab === 1) {
					return this.jobList.filter(job => job.status === 'published');
				} else if (this.currentTab === 2) {
					return this.jobList.filter(job => job.status === 'draft');
				}
				return this.jobList;
			},
			// 根据条件动态过滤选项
			// filteredOptions() {
			// 	return this.jobList.filter(item => item.type === item.gwi_name);
			// }
		},
		onShow() {
			this.$u.api.querygwlist().then(res => {
				this.jobList = res.data.base_info
				for(var i=0; i < this.jobList.length; i++) {
					let createTime = util.formatDate(this.jobList[i].create_time)
			  	// console.log('查询岗位-time：',createTime)
					this.jobList[i].create_time = createTime
				}
				console.log('查询岗位：',this.jobList)
				
				// 获取所在地区
				this.getSelect()
			})
		},
		methods: {
			// 获取所在地区
			getSelect() {
				this.options1 = []
				this.options2 = []
				this.options3 = []
				this.options4 = []
				for(var i=0; i<this.jobList.length; i++) {
					// 地区
					this.options1.push({
						label: this.jobList[i].gwi_workaddr,
						value: i,
					})
					// 岗位名称
					this.options2.push({
						label: this.jobList[i].gwi_name,
						value: i
					})
					// 岗位类型
					this.options3.push({
						label: this.jobList[i].gwi_type,
						value: i
					})
					// 薪资范围
					this.options4.push({
						label: this.jobList[i].gwi_offer,
						value: i
					})
				}
				
				console.log('所在地区：', this.options1)
			},
			
			// 过滤条件
			change(index) {
				this.$u.toast(`点击了第${index}项`);
			},

			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},

			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			},
			// 岗位详情
			jobDetails(id) {
				uni.navigateTo({
					url: `/pages/Practitioner/applyJob/jobDetails?flowid=${id}`
				});
			},

			// 底部tabBar切换
			tabbarchange(index) {
				// this.$u.toast(`点击了第${index}项`);
				if (index == 0) {
					// 当前页为在线课程
					this.current = 0;
					uni.reLaunch({
						url: '/pages/Practitioner/learning/learning'
					});
				} else if (index == 1) {
					// 当前页为考证培训
					this.current = 1;
					uni.reLaunch({
						url: '/pages/Practitioner/examTrain/examTrain'
					});
				} else if (index == 2) {
					// 当前页为考证培训
					this.current = 2;
					uni.reLaunch({
						url: '/pages/Practitioner/applyJob/applyJob'
					});
				} else if (index == 3) {
					// 当前页为职业竞赛
					this.current = 3;
					uni.reLaunch({
						url: '/pages/Practitioner/prizeFight/prizeFight'
					});
				} else if (index == 4) {
					// 当前页为我的
					this.current = 4;
					uni.reLaunch({
						url: '/pages/Practitioner/mine/mine'
					});
				}

				// console.log("tabindex:", index)
				// uni.navigateTo({
				// 	url: '/pages/recruitment/create'
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		// background-color: #f5f5f5;
		background: linear-gradient(to bottom, #CAEDEE, #F1F7F7);

		.wrap {
			margin: 0 10px;
			// padding: 10rpx;
			border-radius: 20rpx;
		}

		.dial-nav {
			margin: 0 10px 10px 10px;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			background-color: #fff;		
		}

		// 搜索栏样式
		.search-container {
			background-color: #f5f5f5;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px 10px 10px;
			border-radius: 12rpx;
		}

		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		.content {
			flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;

					.job-title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.job-salary {
						font-size: 28rpx;
						color: #ff6a00;
						font-weight: bold;
					}
				}

				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;

					.info-item {
						margin-right: 15rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 10rpx;
					// border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					display: flex;
					justify-content: flex-end;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}
	}
</style>